<template>
  <div class="app-container">
    <div class="page-header">
      <el-page-header @back="goBack" content="新增应付款月份报" />
    </div>
    
    <el-card class="form-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="月份" prop="month">
              <el-date-picker v-model="form.month" type="date" value-format="yyyy-MM-dd" placeholder="请选择月份" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款方" prop="payer">
              <el-input v-model="form.payer" placeholder="请输入付款方" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="月结天数" prop="monthlySettlementDays">
              <el-input-number v-model="form.monthlySettlementDays" :min="0" :max="365" placeholder="请输入月结天数" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="对账截止日" prop="reconciliationDeadline">
              <el-date-picker v-model="form.reconciliationDeadline" type="date" value-format="yyyy-MM-dd" placeholder="请选择对账截止日" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易币种" prop="transactionCurrency">
              <el-select v-model="form.transactionCurrency" placeholder="请选择币种" style="width: 100%">
                <el-option label="人民币" value="CNY" />
                <el-option label="美元" value="USD" />
                <el-option label="欧元" value="EUR" />
                <el-option label="日元" value="JPY" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="应付金额" prop="payableAmount">
              <el-input v-model.number="form.payableAmount" placeholder="请输入应付金额" type="number" @input="calculateOutstanding" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已付金额" prop="paidAmount">
              <el-input v-model.number="form.paidAmount" placeholder="请输入已付金额" type="number" @input="calculateOutstanding" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="尚欠款金额" prop="outstandingAmount">
              <el-input v-model.number="form.outstandingAmount" placeholder="自动计算" readonly style="background-color: #f5f7fa" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
        
        <el-form-item class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="submitLoading">提交</el-button>
          <el-button @click="goBack">取消</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addReport } from "@/api/report/report"

export default {
  name: "ReportAdd",
  data() {
    return {
      submitLoading: false,
      form: {
        month: null,
        supplierName: null,
        payer: null,
        monthlySettlementDays: null,
        reconciliationDeadline: null,
        transactionCurrency: null,
        payableAmount: null,
        paidAmount: null,
        outstandingAmount: null,
        remark: null
      },
      rules: {
        month: [{ required: true, message: "月份不能为空", trigger: "blur" }],
        supplierName: [{ required: true, message: "供应商名称不能为空", trigger: "blur" }],
        payer: [{ required: true, message: "付款方不能为空", trigger: "blur" }],
        monthlySettlementDays: [
          { required: true, message: "月结天数不能为空", trigger: "blur" },
          { type: 'number', min: 0, max: 365, message: "月结天数必须在0-365之间", trigger: "blur" }
        ],
        reconciliationDeadline: [{ required: true, message: "对账截止日不能为空", trigger: "blur" }],
        transactionCurrency: [{ required: true, message: "交易币种不能为空", trigger: "change" }],
        payableAmount: [
          { required: true, message: "应付金额不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "应付金额必须大于等于0", trigger: "blur" }
        ],
        paidAmount: [
          { required: true, message: "已付金额不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "已付金额必须大于等于0", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    calculateOutstanding() {
      const payable = parseFloat(this.form.payableAmount || 0)
      const paid = parseFloat(this.form.paidAmount || 0)
      this.form.outstandingAmount = Math.max(0, payable - paid)
    },
    
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (parseFloat(this.form.paidAmount) > parseFloat(this.form.payableAmount)) {
            this.$message.error("已付金额不能超过应付金额")
            return
          }
          
          // 创建提交数据，排除自动计算的字段
          const submitData = {
            month: this.form.month,
            supplierName: this.form.supplierName,
            payer: this.form.payer,
            monthlySettlementDays: this.form.monthlySettlementDays,
            reconciliationDeadline: this.form.reconciliationDeadline,
            transactionCurrency: this.form.transactionCurrency,
            payableAmount: this.form.payableAmount,
            paidAmount: this.form.paidAmount,
            remark: this.form.remark
          }
          
          this.submitLoading = true
          addReport(submitData).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.submitLoading = false
            this.goBack()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    
    goBack() {
      this.$router.go(-1)
    },
    
    resetForm() {
      this.$refs["form"].resetFields()
      this.form = {
        month: null,
        supplierName: null,
        payer: null,
        monthlySettlementDays: null,
        reconciliationDeadline: null,
        transactionCurrency: null,
        payableAmount: null,
        paidAmount: null,
        outstandingAmount: null,
        remark: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.form-card {
  .form-actions {
    margin-top: 30px;
    text-align: center;
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
    
    .el-button {
      margin: 0 10px;
      min-width: 100px;
    }
  }
}
</style> 